<template>
  <div class="comment-reply">
    <van-nav-bar :title="`${comment.reply_count}条回复`">
      <van-icon
        slot="left"
        name="cross"
        @click="$emit('closeReplay')"
      />
    </van-nav-bar>

    <div class="scroll-box">
      <comment-item 
        :comment="comment"
      />

      <van-cell title="所有回复" />

      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <comment-item
          v-for="(item, index) in list"
          :key="index"
          :comment="item"
        />
      </van-list>
    </div>
 
    <div class="bottom-box">
      <van-button round @click="showCommit = true">评论</van-button>
    </div>

    <van-popup
      v-model="showCommit"
      position="bottom"
    >
      <comment-post
        @submitSuccess="submitSuccess"
        :target="comment.com_id.toString()"
      />
    </van-popup>
  </div>
</template>

<script>
import commentItem from './comment-item.vue'
import {getComments} from '@/api/comment'
import CommentPost from './comment-post.vue'

export default {
  components: { commentItem, CommentPost },
  name: 'CommentReply',
  props: {
    comment: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      finished: false,
      list: [],
      offset: null,
      showCommit: false
    }
  },
  methods: {
    async onLoad() {
      const { data } = await getComments({
        type: 'c',
        source: this.comment.com_id.toString(),
        // type: 'a',
        // source: this.$route.params.articleId.toString(),
        offset: this.offset,
        limit: 20
      })

      const { results } = data.data
      this.list.push(...results)

      this.loading = false

      if (results.length) {
        this.offset = data.data.last_id
      } else {
        this.finished = true
      }
    },
    submitSuccess(info) {
      this.showCommit = false
      
      this.list.unshift(info.data.new_obj)
    }
  }
}
</script>

<style scoped lang="less">
.comment-reply{
  .bottom-box {
    position: fixed;
    bottom:0;
    left: 0;
    right: 0;
    height: 88px;
    background: #fff;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    .van-button {
      width: 75%;
      height: 66px;
    }
  }

  .van-nav-bar{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  .scroll-box {
    padding-top: 92px;
    padding-bottom: 90px;
  }
}

</style>
